<template>
	<div style="position: relative;">
		<van-nav-bar :title="users" :fixed=true left-arrow @click-left="onClickLeft">
		</van-nav-bar>
		<div class="container">
			<ul class="list">
				<li>
					<dl>
						<dt>0</dt>
						<dd>映币</dd>
					</dl>
					<van-image style='margin-right: 20px;' round width="80px" height="80px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2666205910,1236504412&fm=26&gp=0.jpg" />
				</li>
				<div class="money">
					<div>
						<p>0.00</p>
						<p>余额</p>
					</div>
					<div>
						<p>0.00</p>
						<p>信用授权</p>
					</div>
					<van-button round type="default">提现</van-button>
				</div>
			</ul>
			<h3 style="margin-left: 20px;">赚映币</h3>
			<van-tabs v-model="activeName" type='card' color='#fbcd04' :swipe-threshold=3>
				<van-tab title="" name="a">
					 <div slot="title">
					      <van-icon name="checked" />月度榜单
					 </div>
					<p class="tips">月度榜单按月度综合分数进行排名，共排10名。每月1号展示上个月的最终排名结果，2号开始重新计算。</p>
					<ul class="tab1">
						<li>
							<span><b>350</b>映币</span>
							<em>第1名</em>
						</li>
						<li>
							<span><b>330</b>映币   ...</span>
							<em>第2名</em>
						</li>
						<li>
							<span>递减20映币</span>
							<em>第n名</em>
						</li>
						<li>
							<span><b>170</b>映币</span>
							<em>第10名</em>
						</li>
					</ul>
				</van-tab>
				<van-tab title="" name="b">
					<div slot="title">
					     <van-icon name="comment" />邀请入驻
					</div>
					<p class="tips">提供有效品牌信息，该品牌成功入住且确认排期后可得30映币；新博主通过你的邀请码成功入住映兔，双方都能得10映币。</p>
					<ul class="tab2">
						<li>
							<span><b>30</b>映币</span>
							<em>邀请品牌入驻</em>
						</li>
						<li>
							<span><b>10</b>映币</span>
							<em>邀请博主入驻</em>
						</li>
					</ul>
				</van-tab>
				<van-tab title="" name="d">
					<div slot="title">
					     <van-icon name="send-gift" />首次申请
					</div>
					<p class="tips">新博主在映兔私享首次发起申请，申请通过或申请被拒绝都能得2映币。</p>
				</van-tab>
				<van-tab title="" name="e">
					<div slot="title">
					     <van-icon name="printer" />提交测评
					</div>
					<p class="tips">新博主第一次提交测评可得2映币。</p>
				</van-tab>
				<van-tab title="" name="f">
					<div slot="title">
					    <van-icon name="bars" />活动排名
					</div>
					<p class="tips">测评结束后，按内容质量、EMV、测评速度得出活动前三名；EMV由测评内容形式、互动量、发布平台和粉丝数决定。</p>
					<ul class="tab2">
						<li>
							<span><b>30</b>映币</span>
							<em>活动第1名</em>
						</li>
						<li>
							<span><b>10</b>映币</span>
							<em>活动第2名</em>
						</li>
						<li>
							<span><b>1</b>映币</span>
							<em>活动第3名</em>
						</li>
					</ul>
				</van-tab>
			</van-tabs>
			<div style="clear: both;width: 100%;border-bottom: 1px solid #E8E8E8;margin-top: 30px;"></div>
			<h3 style="margin-left: 20px;">用映币</h3>
			<ul class="foot">
				<li>
					<div class="left">
						<h4>结算</h4>
						<p>映币可结算至现金余额，结算时需要扣税，现金余额可进行提现。</p>
					</div>
					<div class="right">
						<h4>1 映币</h4>
						<van-icon name="down" color='#fbcd04'/>
						<h4>>1元人民币</h4>
					</div>

				</li>
				<li>
					<div class="left">
						<h4>加申请次数</h4>
						<p>当每日申请次数用完或测评≥5而无法申请时，可以用映币兑换申请次数。</p>
					</div>
					<div class="right">
						<h4>10 映币</h4>
						<van-icon name="down" color='#fbcd04'/>
						<h4>>1次申请</h4>
					</div>
				</li>
			</ul>
		</div>
			<van-button color="#fbcd04" size='large' @click='onclick' style='position: fixed;bottom: 0;left: 0;'><b style="color: black;">映币结算</b></van-button>
	</div>
</template>

<script>
	export default {
		name: 'Account',
		data() {
			return {
				users: '',
				show: false,
				activeName:'a'
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				if (scrollTop > 90) {
					this.users = "我的映币"
				} else {
					this.users = ""
				}
			},
			onclick(){
				this.$dialog.alert({
				         title: "为了账户安全，请先设置密码", //加上标题
				         // message: "hello world", //改变弹出框的内容
				         showCancelButton: true ,//展示取水按钮
						 confirmButtonText:'去设置',
						 cancelButtonText:'稍后'

				})
				.then(() => { //点击确认按钮后的调用
				         console.log("点击了确认按钮噢")
				})
				.catch(() => { //点击取消按钮后的调用
				         console.log("点击了取消按钮噢")
				})
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			 // this.$dialog.alert({
			 //      message: '弹窗内容'
			 //    });
		},
	}
</script>

<style scoped="">
	.van-icon-arrow-left {
		color: #bfbfbf;
		font-size: 24px;
	}
	.van-nav-bar__title {
		font-size: 18px;
		font-weight: 600;
	}

	.container {
		height: 100%;
		background: #f8f8f8;
		margin-top: -20px;
		overflow: hidden;
		margin-bottom: 50px;
	}

	.list {
		padding: 0 0px;
		display: flex;
		flex-direction: column;
		margin-top: 50px;
	}

	.list li {
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list dl {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.list dl dt {
		font-size: 60px;
		text-align: right;
		font-weight: 600;
		margin-bottom: -5px;
	}

	.list dl dd {
		width: 28px;
		color: #949494;
	}

	.money {
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 35px;
		border-bottom: 1px solid #f2f2f2;
	}

	.money div {
		margin-left: 15px;
		color: #949494;
	}

	.money div:nth-child(2) {
		margin-left: 0px;
		margin-right: 80px;
	}
	.tab1{
		display: flex;
		justify-content: space-around;
	}
	.tips{
		padding: 15px;
		color: #939393;
	}
	b{
		color: orange;
	}
	em{
		font-style: normal;
	}
	.tab1 li{
		display: flex;
		flex-direction: column;
		border-left: 1px solid #E8E8E8;
		padding-left: 10px;
	}
	.tab2 li{
		float: left;
		display: flex;
		flex-direction: column;
		padding-left: 15px;
		margin-left: 15px;
		border-left: 1px solid #E8E8E8;
		margin-bottom: 20px;
	}
	.tab1,.tab2 em,span{
		color: #a7a7a7;
	}
	.foot li{
		padding: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.foot li p{
		color: #939393;
	}
	.foot li .left{
		width: 60%;
		border-right: 1px dashed #E8E8E8;
		padding-right: 20px;
	}
	.right{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
</style>
